<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>
	<body>
		<button onclick="remove()">删除</button>
		<p></p>
		<div></div>
		<ul id="list">
			<li></li>
			<li></li>
		</ul>

		<script>
			d3.select("p").datum(50).text(function(d) {
				return "Created new paragraph element and the data " + d + " is assigned";
			})

			d3.select("div")
				.datum(100)
				.append("p")
				.text(function(d) {
					return "Created new paragraph element and the data " + d + " is assigned.";
				})

			//data method
			d3.select("#list").selectAll("li")
				.data([10, 20, 30, 25, 15])
				.text(function(d) {
					return "这是编译阶段生成的节点，值是：" + d;
				})
				.enter()
				.append("li")
				.text(function(d) {
					return "这是动态创建的值：" + d;
				})

			function remove() {
				d3.selectAll("li")
					.data([10, 20, 30, 15])
					.exit()
					.remove()
			}
		</script>
	</body>
</html>
